<template>
  <div>
    <!--              点赞 @mouseenter.native用来取消默认行为-->
    <el-button @click="like()" @mouseenter.native="$refs.likeText.style.color = '#606266'" plain
               style="padding: 10px;font-size: 16px;border: none">
      <i ref="aiXinComment" class="iconfont icon-aixin" :style="{'color':isLike?'red':'#606266'}"></i>
      <span ref="likeText">点赞 {{ starsTem }}</span>
    </el-button>
    <!--              查看回复,点击按钮后跳弹窗-->
    <!--    <el-button type="text" @click="outerVisible = true,searchReply()">查看回复</el-button>-->
    <!--    <el-dialog title="查看对话" :visible.sync="outerVisible" :width="dialogWidth">-->
    <!--      &lt;!&ndash;      原评论&ndash;&gt;-->
    <!--      <ChildComment :isFirst="true" style="box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 0 12px rgba(0, 0, 0, .04)"-->
    <!--                    :comment="comment"></ChildComment>-->
    <!--      &lt;!&ndash;子评论区&ndash;&gt;-->
    <!--      <ChildComment v-for="(comment,index) in comments" :key="comment.id" :comment="comment"-->
    <!--                    :index="index"></ChildComment><br><br>-->
    <!--      &lt;!&ndash; 分页开始&ndash;&gt;-->
    <!--      <el-pagination-->
    <!--        background-->
    <!--        layout="prev, pager, next"-->
    <!--        :total="1000">-->
    <!--      </el-pagination>-->
    <!--    </el-dialog>-->
    <!-- 分页结束-->
  </div>
</template>
<script>

import UserHead from '../user/UserHead'
import Comment from './Comment'
import ChildComment from './ChildComment'
import Adaption from '../../base/Adaption'
import axios from 'axios'

export default {
  name: 'CommentBottom',
  props: [
    'comment', 'uid'
  ],
  components: {Adaption, ChildComment, UserHead, Comment},
  data () {
    return {
      outerVisible: false,
      innerVisible: false,
      starsTem: this.comment.likeNum,
      comments: [],
      childStars: '',
      dialogWidth: '50%',
      isLike: !!this.comment.isLike
    }
  },
  methods: {
    like: function () {
      if (!this.uid) {
        // 未登录则弹登录页面
        this.$router.push('/login')
      } else {
        // 已登录
        if (this.isLike) {
          // 取消点赞
          this.$refs.aiXinComment.style.color = '#606266'
          this.starsTem--
          axios.delete('/user/doUnLikeForComment', {
            params: {
              commentId: this.comment.id,
              uid: this.uid
            }
          }).then(function (res) {
            console.log(res.data)
          })
        } else {
          // 点赞
          this.$refs.aiXinComment.style.color = 'red'
          this.starsTem++
          axios.put('/user/doLikeForComment', {}, {
            params: {
              commentId: this.comment.id,
              uid: this.uid
            }
          }).then(function (res) {
            console.log(res.data)
          })
        }
        this.isLike = !this.isLike
      }
    },
    searchReply: function () {
      if (window.innerWidth < 992) {
        this.dialogWidth = '100%'
      }
    }
  }
}
</script>

<style scoped>
</style>
